<template>
  <el-card class="update-log" style="height: 366px;">
    <div slot="header" class="clearfix">
      <span>考试取证趋势</span>
    </div>
    <div class="body">
      <div class="chart" ref="charts" style="height:300px;width:100%;" />
    </div>
  </el-card>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons')
import resize from './mixins/resize'

export default {
  mixins: [resize],
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
            this.chart = echarts.init(this.$refs['charts'], 'macarons');
            var times = ['2022-09','2022-10','2022-11','2022-12','2023-02','2023-01'];
            var data1 = [3, 5, 2, 6, 0, 8];
            var data2 = [101, 39, 67, 101, 39, 67];
            var data3 = [101,39,67,101,39,67];
            this.setOptions(times, data1, data2, data3)
        },
        getGradientColor(color11, color22){
            return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {offset: 0, color: color11},
                {offset: 1, color: color22}]) ;
        },
        setOptions(times, data1, data2, data3) {
            var barWidth = 25;
            this.chart.setOption({
                tooltip: {
                    trigger: "axis",
                    show: true,
                    backgroundColor: '#e5e9e7',
                    textStyle: {
                        fontSize: 12,
                        color: '#152934',
                        lineHeight: 50
                    },
                },
                grid: {
                    left: "10",
                    right: "10",
                    top: "10%",
                    bottom: "2%",
                    containLabel: true,
                },
                legend: {
                  data: ['申报项目', '报名人数', '取证人数']
                },
                xAxis: {
                    name: '',
                    data: times,
                    axisTick: {
                        show: false,
                    },
                    nameTextStyle: {
                        color: '#2683CB',
                        fontSize: '14',
                        fontWeight: '400',
                        // padding: [20, 0, 0, -35]
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#1F8BC6',
                            width: 1,
                            opacity: 0.3
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#2683CB',
                            fontSize: '14',
                            fontWeight: '400',
                        },
                    },
                },
                yAxis: {
                    axisLine: {
                        show: false
                    },
                    nameTextStyle: {
                        color: '#2583CB',
                        fontSize: '14',
                        fontWeight: '400',
                        padding: [0, 40, 0, 0]
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#1F8BC6',
                            width: 1,
                            opacity: 0.3
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#2683CB',
                            fontSize: '14',
                            fontWeight: '400',
                        }
                    }
                },
                series: [
                  {
                      name: '申报项目',
                      type: "bar",
                      barWidth: barWidth,
                      barGap: "-0%",
                      data: data1,
                      itemStyle: {
                          normal: {
                              color: '#43CFB4',
                          },
                      },
                  },
                  {
                      name: '报名人数',
                      type: "bar",
                      barWidth: barWidth,
                      barGap: "-0%",
                      data: data2,
                      itemStyle: {
                          normal: {
                              color: '#2DB4F8',
                          },
                      },
                  },
                  {
                      name: '取证人数',
                      type: "bar",
                      barWidth: barWidth,
                      barGap: "10%",
                      data: data3,
                      itemStyle: {
                          normal: {
                              color: '#E4A824',
                          },
                      },
                  }
                ]
            })
        }
    }
}
</script>
